<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div id="app">
  <h1 v-some.upper>{{ title }}</h1>
  <h1 v-some.lower>{{ title }}</h1>
  <h1 v-style="style">{{ title }}</h1>
  <button @click="handleStyle">修改v-style</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  let vm = new Vue({
    el: '#app',
    data () {
      return {
        title: 'Test for Directive.',
        style: { // v-style的参数
          fontStyle: 'italic'
        }
      }
    },
    methods: {
      handleStyle () {
        this.$set(this.style, 'color', '#ababab')
        this.$set(this.style, 'transform', 'rotateX(45deg)')
      }
    },
    directives: {
      style: { // 用于为节点绑定样式
        bind (el, binding, vnode) {
          console.log('%c--------- bind参数：el, binding, vnode ---------', 'font-size: 18px;')
          console.log('%o\n\n%o\n\n%o', el, binding, vnode)
          let styles = binding.value // 获取指令绑定的值
          Object.keys(styles).forEach(key => el.style[key] = styles[key])
        },
        update (el, binding, vnode, oldVnode) {
          console.log('%c---- update参数：el, binding, vnode, oldVnode ----', 'font-size: 18px;')
          console.log('%o\n\n%o\n\n%o\n\n%o', el, binding, vnode, oldVnode)
          let styles = binding.value // 获取指令绑定的值
          Object.keys(styles).forEach(key => el.style[key] = styles[key])
        }
      },
      // 在bind和update时触发相同行为，且无需定义其他钩子函数，
      // 指令可以简写为以下形式
      some (el, binding) {
        let text = el.innerText
        let modifiers = binding.modifiers
        if (modifiers.upper) { // 如果带有upper后缀，则大写文本
          el.innerText = text.toUpperCase()
        }
        if (modifiers.lower) { // 如果带有lower后缀，则小写文本
          el.innerText = text.toLowerCase()
        }
      }
    }
  })
</script>
</body>
</html>